<template>
  <a-card :bordered="false" :body-style="{ padding: 0 }">
    <a-tabs size="large" v-model:activeKey="saleSearch.type" class="monitor-card-tabs">
      <a-tab-pane :tab="tabTxt.t1" key="month1" />
      <a-tab-pane :tab="tabTxt.t2" key="month2" />
      <a-tab-pane :tab="tabTxt.t3" key="month3" />
    </a-tabs>
    <div style="padding-bottom: 10px">
      <a-row :gutter="16">
        <a-col :lg="24" :md="15" :sm="24" :xs="24">
          <div class="demo-monitor-title">优质司机排名</div>
          <template v-if="saleSearch.type === 'month1'">
            <div v-for="(item, index) in monthNums1" :key="index" class="demo-monitor-rank-item ele-cell">
              <ele-tag shape="circle" :color="index < 3 ? '#314659' : ''" style="border: none">
                {{ index + 1 }}
              </ele-tag>
              <div class="ele-cell-content ele-elip">{{ item.carNo }}</div>
              <div class="ele-text-secondary">{{ item.num }}单</div>
            </div>
          </template>
          <template v-if="saleSearch.type === 'month2'">
            <div v-for="(item, index) in monthNums2" :key="index" class="demo-monitor-rank-item ele-cell">
              <ele-tag shape="circle" :color="index < 3 ? '#314659' : ''" style="border: none">
                {{ index + 1 }}
              </ele-tag>
              <div class="ele-cell-content ele-elip">{{ item.carNo }}</div>
              <div class="ele-text-secondary">{{ item.num }}单</div>
            </div>
          </template>
          <template v-if="saleSearch.type === 'month3'">
            <div v-for="(item, index) in monthNums3" :key="index" class="demo-monitor-rank-item ele-cell">
              <ele-tag shape="circle" :color="index < 3 ? '#314659' : ''" style="border: none">
                {{ index + 1 }}
              </ele-tag>
              <div class="ele-cell-content ele-elip">{{ item.carNo }}</div>
              <div class="ele-text-secondary">{{ item.num }}单</div>
            </div>
          </template>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue/es';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { getSaleroomList } from '@/api/dashboard/analysis';
import useEcharts from '@/utils/use-echarts';


import {
  QuestionCircleOutlined,
  CaretUpOutlined,
  CaretDownOutlined
} from '@ant-design/icons-vue';
import { listCustomerAndDriverNum } from '@/api/order/dashBoard';

import dayjs from 'dayjs';

let tabTxt = reactive({
  t1: dayjs().format('MM月'),
  t2: dayjs().add(-1, 'month').format('MM月'),
  t3: dayjs().add(-2, 'month').format('MM月'),
})


let monthNums1 = ref([{ num: 0, date: 'tt' }, { num: 0, date: 'aa' }, { num: 1, date: 'bb' }, { num: 2, date: 'cc' }])
listCustomerAndDriverNum({ carNo: 1, date1: dayjs().format('YYYY-MM-DD') }).then(msg => {
  monthNums1.value = msg
  // monthNums.value.map(ele=> {
  //   console.log(ele.factoryAddress);
  //   if(ele.factoryAddress.length>5) {
  //     ele.factoryAddress = ele.factoryAddress.substr(0,10)
  //   }
  // })
}).catch((e) => {
})
let monthNums2 = ref([{ num: 0, date: 'tt' }, { num: 0, date: 'aa' }, { num: 1, date: 'bb' }, { num: 2, date: 'cc' }])
listCustomerAndDriverNum({ carNo: 1, date1: dayjs().add(-1, 'month').format('YYYY-MM-DD') }).then(msg => {
  monthNums2.value = msg
}).catch((e) => {
})
let monthNums3 = ref([{ num: 0, date: 'tt' }, { num: 0, date: 'aa' }, { num: 1, date: 'bb' }, { num: 2, date: 'cc' }])
listCustomerAndDriverNum({ carNo: 1, date1: dayjs().add(-2, 'month').format('YYYY-MM-DD') }).then(msg => {
  monthNums3.value = msg
}).catch((e) => {
})


// 销售量搜索参数
const saleSearch = reactive({
  type: 'month1',
  dateType: '1',
});

</script>

<style lang="less" scoped>
.monitor-card-tabs :deep(.ant-tabs-nav) {
  padding: 0 16px;
}

.demo-monitor-title {
  padding: 6px 20px;
}

.demo-monitor-rank-item {
  padding: 0 20px;
  margin-top: 18px;
}
</style>
